<template lang="html">
  <div class="dashboard">
    <div class="flex-container column">
      <div class="item four active" @click="clickChart('4')" style="transform: translate(20.7%, 0) scale(1)">
        <point></point>
      </div>
    </div>
  </div>
</template>

<script>
import point from 'components/point/point'

export default {
  data () {
    return {
      items: []
    }
  },
  mounted () {
    this._init()
    document.getElementById('app').style.height = document.documentElement.clientHeight + 'px'
    window.onresize = () => {
      console.log(document.documentElement.clientHeight)
      return (() => {
        document.getElementById('app').style.height = document.documentElement.clientHeight + 'px'
      })()
    }
  },
  methods: {
    _resize () {
      this.$root.charts.forEach((myChart) => {
        myChart.resize()
      })
    },
    _init () {
      this.items = document.querySelectorAll('.flex-container .item')
      for (let i = 0; i < this.items.length; i++) {
        this.items[i].dataset.order = i + 1
      }
    },
    clickChart (clickIndex) {
      let activeItem = document.querySelector('.flex-container .active')
      let activeIndex = activeItem.dataset.order
      let clickItem = this.items[clickIndex - 1]
      if (activeIndex === clickIndex) {
        return
      }
      activeItem.classList.remove('active')
      clickItem.classList.add('active')
      this._setStyle(clickItem, activeItem)
    },
    _setStyle (el1, el2) {
      let transform1 = el1.style.transform
      let transform2 = el2.style.transform
      el1.style.transform = transform2
      el2.style.transform = transform1
    }
  },
  components: {
    point
  }
}

</script>

<style lang="stylus" scoped>
  *
    box-sizing: border-box;
  .point,.multipleColumn,.columnChart,.line
    height 100%!important
    width 100%!important
    background none!important
  .item
    padding: 0px;
    margin: 0px;
    width: 30%;
    height: 350px;
    position absolute
    transform scale(0.33)
    text-align: center;
    transition:all 0.8s;
  .dashboard
    position relative
    width 100%
    height 100%
    margin:0px;
    padding:0px;
    background-color darkseagreen
    background-size 100% 100%
  .flex-container.column
    position relative
    height: 90%;
    width: 90%;
    overflow: hidden;
    margin:  0 auto 100px auto;
    box-sizing: content-box;
  .active
    height 100%
    width: 69%;
    margin-left: 10px;
    line-height: 300px;
</style>
